<!--
 * @Description: 个人中心页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:22:56
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-12 19:34:00
 -->
<template>
	<div class="collect">
		<!-- Add a static page for my favorite module -->
		<div class="collect-header">
			<div class="collect-title">
				<i class="el-icon-collection-tag" style="color: #ff6700;"></i>
				个人中心
			</div>
		</div>
		<div class="content">
			<div class="person_body">
				<div class="person_body_left">
					<el-card class="box-card" :body-style="{ padding: '0px' }">
						<el-menu
							router
							active-text-color="#00c3ff"
							class="el-menu-vertical-demo"
						>
							<el-menu-item
								index="/center/centerInfo">
								<i class="el-icon-edit-outline"></i>
								<span slot="title">个人信息</span>
							</el-menu-item>
							<el-menu-item
								index="/center/centerPassword">
								<i class="el-icon-document"></i>
								<span slot="title">修改密码</span>
							</el-menu-item>
						</el-menu>
					</el-card>
				</div>
				<div class="person_body_right">
					<router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
			
			};
		}
	};
</script>
<style>
	.collect .collect-header {
		height: 64px;
		background-color: #fff;
		border-bottom: 2px solid #ff6700;
	}
	.collect .collect-header .collect-title {
		width: 1225px;
		margin: 0 auto;
		height: 64px;
		line-height: 58px;
		font-size: 28px;
	}
	.collect .content {
		padding: 20px 0;
		width: 1225px;
		margin: 0 auto;
	}
	
	/*下面部分样式*/
	/*.person_body {
		width: 1000px;
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 5px;
	}*/
	
	.person_body_left {
		width: 200px;
		height: 600px;
		border-radius: 5px;
		text-align: center;
		float: left;
		margin-right: 20px;
	}
	
	.person_body_right {
		float: left;
		/* height: 500px; */
		border-radius: 5px;
		background-color: white;
	}
	
	.box-card {
		height: 500px;
	}
</style>